<%--用户登录页面--%>
<%--
  Created by IntelliJ IDEA.
  User: tangms
  Date: 2022/4/2
  Time: 8:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="script/jquery-3.3.1.js">
        window.onload=function (){
            alert(1)
            var img = document.getElementById("img");
            img.onclick=function (){
                img.src="checkCodeServlet?time="+new Date().getTime();

                //$("#img").src="/checkCodeServlet?time="+new Date().getTime();
            }
            // $("#change").onclick=function (){
            //
            //     $("#img").src="/checkCodeServlet?time="+new Date().getTime();
            // }
        }


        function checkUsename() {
            var usename = $("#usename").val();
            //中文，英文字母和数字及_且长度为1到9
            var reg_usename = /^[\u4e00-\u9fa5_a-zA-Z0-9]{1,9}$/
            var flag = reg_usename.test(usename);
            if (flag == true) {
                $.get("${pageContext.request.contextPath}/userServlet?action=userRegistByUsename", {usename: usename}, function (data) {
                    var span = $("#_usename");
                    if (data.login == true) {
                        span.css("color", "green");
                        span.html(data.msg);
                    } else {
                        span.css("color", "red");
                        span.html(data.msg);
                    }
                }, "json");
            } else {
                $("#usename").css("border", "1px solid red");
                $("#_usename").html("格式错误，请输入1到9位字符或数字！")
                $("#_usename").css("color", "red");
            }
        }
    </script>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
    //background: url("../image/xiaohongshu2.jpg" ) no-repeat center;
    }
    .bac_border{
        width: 500px;
        height:700px;
        border: 8px solid #EEEEEE;
        margin: auto;
        padding: 15px;
    }
    .title{
        margin:auto;
        margin-top: 190px;

    }
    .end{
        margin:auto;
        margin-top: 40px;
    }
    .word{
        font-size: 20px;
    }
    #usename,#password{
        border: 1px;
        width:452px ;
        margin-top: 50px;
    }
    .left{
        width: 80px;
        text-align: right;
        height: 80px;
    }
    #usename,#password,#checkCode{
        width: 290px;
        height: 43px;
        border: 1px solid #A6A6A6;
        border-radius: 5px;
        padding-left: 10px;
    }
    #btn_sub{
        width: 100px;
        height: 30px;
        background-color:lightskyblue;
        align-content: center;
        border: 1px solid lightskyblue;
    }
    .tip{
        color:red;
        margin-left: 200px;
        margin-bottom: 30px;
    }
</style>
<body>
<div class="bac_border">
    <div class="title"><p class="word" align="center">用户登录</p></div>
    <div  class="table">
        <form action="userServlet" method="post">
            <input type="hidden" name="action" value="userLogin">
            <table>
                <tr>
                    <td class="left"><label for="usename">用户名</label></td>
                    <td class="right"><input type="text" name="usename" id="usename" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td class="left"><label for="password">密码</label></td>
                    <td class="right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                </tr>
<%--                <tr>--%>
<%--                    <td>验证码</td>--%>
<%--                    <td><input type="text" name="checkCode" id="checkCode"></td>--%>
<%--                </tr>--%>
<%--                <br>--%>

<%--                <tr>--%>
<%--                    <img id="img" src="image/checkCode.jpg" width="100" height="50">--%>
<%--                </tr>--%>

                <div class="end" align="center" colspan="3" >
                    <input type="submit" id="btn_sub" value="登录">
                </div>

            </table>
        </form>
    </div>
    <div class="tip"><%=request.getAttribute("fail")==null?"":request.getAttribute("fail")%></div>
    <div class="tip"><%=request.getAttribute("tips")==null?"":request.getAttribute("tips")%></div>
</div>
</body>
</html>
